<template>
    <div class="content-container">
        <Title :icon="'line-chart-fill'" :title="'扣费统计'"></Title>
        <div class="h-520px ml-16px mr-16px">
            <div class="table-container">
                <el-table :data="state.tableData" class="w-full">
                    <el-table-column label="词扣费" prop="word" align="center" />
                    <el-table-column label="日扣费" prop="day" align="center" />
                    <el-table-column label="周扣费" prop="week" align="center" />
                    <el-table-column label="月扣费" prop="month" align="center" />
                    <el-table-column label="总计扣费" prop="total" align="center" />
                </el-table>
            </div>
            <div class="mt-16px h-330px" id="deduction">

            </div>
        </div>

    </div>
</template>

<script setup lang="ts">
import LeftMenu from '@/layout/components/Sidebar/LeftMenu.vue';
import * as echarts from 'echarts'

const state = reactive({
    tableData: [
        {
            word: '塑料粉碎机',
            day: 100,
            week: 100,
            month: 100,
            total: 100
        },
        {
            word: '塑料粉碎机',
            day: 100,
            week: 100,
            month: 100,
            total: 100
        },
        {
            word: '塑料粉碎机',
            day: 100,
            week: 100,
            month: 100,
            total: 100
        }
    ],
    yesterday: '',
    lastWeek: '',
})

var app = {};



onMounted(() => {
    const chartDom = document.getElementById('deduction');
    const myChart = echarts.init(chartDom);
    let option;
    option = {
        // color: ['#079f5f', '#f69e16', '#3f7ffd'],
        legend: {
            left:'left'
        },
        tooltip: {},
        dataset: {
            source: [
                ['product', '每日扣费', '每周扣费', '每月扣费'],
                ['Matcha Latte', 43.3, 85.8, 93.7],
                ['Milk Tea', 83.1, 73.4, 55.1],
                ['Cheese Cocoa', 86.4, 65.2, 82.5],
                ['Walnut Brownie', 72.4, 53.9, 39.1]
            ]
        },
        xAxis: { type: 'category' },
        yAxis: {},
        series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
    };

    option && myChart.setOption(option);
})
</script>

<style scoped></style>